<wide-header-page title="{{cardConfig?.displayName}}">
  <div page-content>

    <ion-list class="bp-list" [ngClass]="{'top-padding': cardConfig?.displayName === 'Amazon'}">
      <button (click)="setEmail()" ion-item *ngIf="cardConfig?.displayName === 'Amazon'">
        <ion-label>{{ 'Receipt Email' | translate }}</ion-label>
        <ion-note item-end>
          {{ email || ('Not set' | translate) }}
        </ion-note>
      </button>
      <ion-item-divider *ngIf="currentGiftCards && currentGiftCards.length">{{'Current Cards' | translate}}
      </ion-item-divider>
      <card-list-item *ngFor="let card of currentGiftCards" [card]="card" type="purchased"
        (click)="goToCardDetails(card)"></card-list-item>
      <ion-item-divider *ngIf="archivedGiftCards && archivedGiftCards.length">{{'Archived Cards' | translate}}
      </ion-item-divider>
      <card-list-item *ngFor="let card of archivedGiftCards" [card]="card" type="purchased"
        (click)="goToCardDetails(card)"></card-list-item>
      <ion-item-divider></ion-item-divider>
    </ion-list>
  </div>
</wide-header-page>